<script setup>
import HomePanel from './HomePanel.vue'
import { onMounted,ref } from 'vue';
import { getHotProduct } from '@/api/Home/getHotProduct';
const HotList = ref([])
const getHotPor = async ()=>{
  const res  = await getHotProduct();
  HotList.value = res.data.result
}
onMounted(()=>{
    getHotPor()
})
</script>

<template>
    <div>
        <HomePanel title="人气推荐" sub-tile="人气爆款  不容错过">
            <div class="slotMain">
                <ul>
                    <li v-for="i in HotList" :key="i">
                        <a href="javascript:;">
                            <img :src="i.picture" v-img-lazy="i.picture">
                            <h2 class='ellipsis'>{{ i.title }}</h2>
                            <p class="ellipsis">{{ i.alt }}</p>
                        </a>
                    </li>
                </ul>
            </div>
        </HomePanel>
    </div>
</template>

<style scoped lang="scss">
.slotMain{
    ul{
        display: flex;
        justify-content: space-around;
        align-items: center;
        li{
            &:hover {
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
            }
            ~li{
                margin-left: 15px;
            }
            text-align: center;
            p{
                margin-top: -10px;
                color: #999;
            }
        }
        
    }
}
</style>